<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="addCustomerText">创建报价单</span></el-col>
        <el-col :span="18">
          <el-row type="flex" justify="end">
            <el-button type="primary" size="medium">生成报价单</el-button>
            <el-button>重置</el-button>
            <el-button type="primary">保存</el-button>
            <el-button @click="goback">返回</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-form label-width="120px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="客户信息" name="first">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="客户名称">
                  <el-input placeholder="请输入客户名称" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="公司名称">
                  <el-input placeholder="请输入公司名称" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国家">
                  <el-input placeholder="请输入国家" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="旺旺ID">
                  <el-input placeholder="请输入旺旺ID" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮箱">
                  <el-input placeholder="请输入邮箱" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="来源">
                  <el-input placeholder="请输入来源" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col>
                <el-form-item label="联系方式">
                  <el-checkbox-group
                    v-model="customerForm.customer_main_chat_ways"
                  >
                    <el-checkbox :label="1">邮箱</el-checkbox>
                    <el-checkbox :label="2">手机</el-checkbox>
                    <el-checkbox :label="3">微信</el-checkbox>
                    <el-checkbox :label="4">WhatsApp</el-checkbox>
                    <el-checkbox :label="5">座机</el-checkbox>
                    <el-checkbox :label="6">QQ</el-checkbox>
                    <el-checkbox :label="7">平台账号</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item>
                  <template #default="{ row }">
                    <el-row :gutter="20" type="flex" justify="start">
                      <el-col :span="8">
                        <el-form-item label="手机">
                          <el-input
                            v-model="customerForm.customer_contact_ways.phone"
                            placeholder="请输入手机"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="微信">
                          <el-input
                            v-model="customerForm.customer_contact_ways.wechat"
                            placeholder="请输入微信"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="收款信息" name="second">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="付款方式">
                  <el-input placeholder="请输入付款方式" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收款账户">
                  <el-input placeholder="请输入收款账户" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="平台单号">
                  <el-input placeholder="请输入平台单号" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="商品信息" name="third">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="产品类型">
                  <el-input placeholder="请输入产品类型" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="材质/材料">
                  <el-input placeholder="请输入材质" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品尺寸">
                  <el-input placeholder="请输入产品尺寸" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="表面处理">
                  <el-input placeholder="请输入表面处理" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="印刷颜色">
                  <el-input placeholder="请输入印刷颜色" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="包装方式">
                  <el-input placeholder="请输入包装方式" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="工艺">
                  <el-input placeholder="请输入工艺" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="烫金颜色">
                  <el-input placeholder="请输入烫金颜色" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="">
                  <!-- <el- placeholder="请输入">"input></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="款式1">
                  <el-input placeholder="请输入款式1" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="款式2">
                  <el-input placeholder="请输入款式2" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="款式3">
                  <el-input placeholder="请输入款式3" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="总数量">
                  <el-input placeholder="请输入总数量" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="备注信息">
                  <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入备注信息"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'first',
      customerForm: {
        customer_main_chat_ways: [],
        customer_contact_ways: {}
      }
    }
  },
  methods: {
    // 点击返回
    goback() {
      this.$emit('goback')
    },

    // 切换tab栏
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.addCustomerText {
  color: #1ecba3;
  font-size: 22px;
}
</style>
